<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/left.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/vue.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            var vue = new Vue({
                el:'#app',
                data:{
                    url:'http://localhost:8889/admin',
                    admins:[]
                },
                methods:{
                    query : function () {
                        var that = this;
                        $.getJSON(that.url+'/query',function (data) {
                            that.admins = data;
                            console.log(data)
                        })
                    },
                    forward : function (id) {
                        location.href = "admin.html?id="+id;
                        console.log(id)
                    },
                    remove:function(id){
                        var that = this;
                        $.get(that.url+'/remove/'+id,function (data) {
                            if(data!=null){
                                alert("删除成功"+id)
                                that.query();

                            }else{
                                alert("删除失败"+id)

                            }
                        })
                    },
                }
            })
            vue.query();
            $("#header").load("header.html");
            $("#left").load("left.html");
        })
    </script>
    <style>
        .remark{
            margin-top: 20px;
            color: #737373;
        }
        #accordion .panel{
            box-shadow: none;
            border: none;
            border-radius:0;
            margin-bottom: 6px;
            border-left:5px solid #944f95;
        }

    </style>
    <title>系统用户列表</title>
</head>
<body>
    <div class="container-fluid" id="app">
        <div class="row" id="header">

        </div>
        <div class="row">
            <div class="col-md-2" id="left">

            </div>
            <div class="col-md-9"  style="margin-left:100px;margin-top:10px">
                <div class="row tithead"style="margin-left: 15px"><h3 class="glyphicon glyphicon-lock"> 管理员管理
                </h3></div>

                <div class="row col-md-10">
                    <ul class="nav nav-tabs" role="tablist" style="margin-bottom: 30px;margin-top: 10px">
                        <li role="presentation" class="active">
                            <a href="#coa" aria-controls="coa" role="tab" data-toggle="tab">管理员信息</a>
                        </li>

                    </ul>
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover table-striped">
                            <thead>
                            <tr>
                                <th class="text-center">序号</th>
                                <th class="text-center">账号</th>
                                <th class="text-center">角色</th>
                                <th colspan="2" class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(a,index) in admins" class="text-center">
                                <td>{{index+1}}</td>
                                <td>{{a.username}}</td>
                                <td>
                                    <span v-if="a.status==1">超级用户</span>
                                    <span v-if="a.status==0">普通用户</span>
                                </td>
                                <td>
                                    <button @click="forward(a.id)" class="btn btn-warning btn-sm">编辑</button>
                                </td>
                                <td>
                                    <button @click="remove(a.id)" class="btn btn-danger btn-sm">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="row text-right remark"><h5>备注：管理员详细信息. </h5></div>

                </div>


            </div>
        </div>
    </div>
</body>
</html>